<!--轮播图设置-->
<template>
  <div class="set_container">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="内容设置">
        <div class="img_setting_title">添加图片(最多10张)</div>
        <div v-if="list.length > 0">
          <div
            class="img_setting_box"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="img_setting_box_title">
              <div class="img_setting_box_title_left">
                <a-icon type="file-image" />
                <span>图片{{ index + 1 }}</span>
                <div
                  class="img_delete"
                  @click="handleDeleteSwiper(item, index)"
                >
                  删除
                </div>
              </div>
            </div>
            <div class="img_setting_box_content">
              <div class="img_c_left">
                <div class="img_c_l">
                  <div class="img_c_l_t">图片</div>
                  <div class="img_c_l_c">图片名称</div>
                </div>
                <div class="img_c_l">
                  <div class="img_c_l_t">链接</div>
                  <div class="img_c_l_c_l">请选择跳转链接</div>
                </div>
              </div>
              <div class="img_c_right">
                <img src="@/assets/logo.png" alt="" />
                <div class="change_img">
                  <div class="change_img_btn">点击替换</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else></div>
        <a-button
          class="img_setting_add"
          icon="plus"
          @click="addSwiperPicture()"
        >
          添加图片
        </a-button>
      </a-tab-pane>
      <a-tab-pane key="2" tab="样式设置" force-render>
        <div class="module_content_set">
          <div class="set_title">内容样式</div>
          <div class="set_list">
            <div class="set_item">
              <div class="set_label">图片边角</div>
              <div class="set_radio">
                <a-radio-group v-model="boderRadius" button-style="solid">
                  <a-radio-button value="0px"> 直角 </a-radio-button>
                  <a-radio-button value="10px"> 圆角 </a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <div class="set_item">
              <div class="set_label">轮播间隔</div>
              <div class="set_radio">
                <a-radio-group v-model="autoPlay" button-style="solid">
                  <a-radio-button value="3000ms"> 3s </a-radio-button>
                  <a-radio-button value="5000ms"> 5s </a-radio-button>
                </a-radio-group>
              </div>
            </div>
          </div>
        </div>
        <div class="module_content_set">
          <div class="set_title">组件样式</div>
          <div class="set_list">
            <div class="set_item">
              <div class="set_label">页边距</div>
              <div class="set_radio">
                <a-radio-group v-model="padding" button-style="solid">
                  <a-radio-button value="0px"> 无 </a-radio-button>
                  <a-radio-button value="30px"> 有 </a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <div class="set_item">
              <div class="set_label">上边距</div>
              <div class="set_radio">
                <a-radio-group v-model="marginTop" button-style="solid">
                  <a-radio-button value="0px"> 小 </a-radio-button>
                  <a-radio-button value="15px"> 中 </a-radio-button>
                  <a-radio-button value="30px"> 大 </a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <div class="set_item">
              <div class="set_label">下边距</div>
              <div class="set_radio">
                <a-radio-group v-model="marginBottom" button-style="solid">
                  <a-radio-button value="0px"> 小 </a-radio-button>
                  <a-radio-button value="15px"> 中 </a-radio-button>
                  <a-radio-button value="30px"> 大 </a-radio-button>
                </a-radio-group>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["id", "contentSetting", "styleSetting"],
  data() {
    let data = {};
    // 切换设置组件时，渲染对应的设置数据
    this.initContentProps(data);
    this.initStyleProps(data);
    return {
      loop: true, //是否开启循环播放
      showIndicators: true, //是否显示指示器
      vertical: false, //是否纵向滑动
      cont: "",
      ...data,
    };
  },
  watch: {
    // 相同组件时切换对应组件的数据
    activeComponent(newComponent, oldVal) {
      if (oldVal && newComponent && oldVal !== newComponent) {
        // this.initProps(this);
        this.initContentProps(this);
        this.initStyleProps(this);
      }
    },
    boderRadius(newRadius) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "boderRadius",
        value: newRadius,
      });
    },
    marginTop(newTop) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "marginTop",
        value: newTop,
      });
    },
    marginBottom(newBottom) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "marginBottom",
        value: newBottom,
      });
    },
    padding(newPadding) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "padding",
        value: newPadding,
      });
    },
    autoPlay(newAuto) {
      this.setComponentProps({
        id: this.id,
        node: "contentSetting",
        name: "autoPlay",
        value: newAuto,
      });
    },
    list(newList) {
      this.setComponentProps({
        id: this.id,
        node: "contentSetting",
        name: "list",
        value: newList,
      });
    },
  },
  computed: {
    //映射组件的状态
    ...mapState({
      activeComponent: (state) => state.activeComponent,
    }),
  },
  methods: {
    initStyleProps(data) {
      if (this.styleSetting) {
        data.boderRadius = this.styleSetting.boderRadius || "0px";
        data.marginTop = this.styleSetting.marginTop || "0px";
        data.marginBottom = this.styleSetting.marginBottom || "0px";
        data.padding = this.styleSetting.padding || "0px";
      } else {
        data.boderRadius = "0px";
        data.marginTop = "0px";
        data.marginBottom = "0px";
        data.padding = "0px";
      }
    },
    initContentProps(data) {
      if (this.contentSetting) {
        data.list = this.contentSetting.list;
        data.autoPlay = this.contentSetting.autoPlay || "3000ms";
      } else {
        data.list = [
          {
            imageUrl:
              "https://image-c.weimobwmc.com/saas-wxbiz/37e08e918c1e44bfb61aaf34cdc67935.png?imageView2/2/w/750/q/100/interlace/1",
            linkType: "page",
            link: "",
          },
          {
            imageUrl:
              "https://image-c.weimobwmc.com/saas-wxbiz/37e08e918c1e44bfb61aaf34cdc67935.png?imageView2/2/w/750/q/100/interlace/1",
            linkType: "page",
            link: "",
          },
        ];
        data.autoPlay = "3000ms";
      }
    },
    //添加轮播图数量
    addSwiperPicture() {
      let length = this.list.length;
      if (length > 4) {
      } else {
        this.list.push({
          imageUrl:
            "https://image-c.weimobwmc.com/saas-wxbiz/37e08e918c1e44bfb61aaf34cdc67935.png?imageView2/2/w/750/q/100/interlace/1",
          linkType: "page",
          link: "",
        });
      }
    },
    handleDeleteSwiper(item, index) {
      this.list.splice(index, 1);
    },
    ...mapMutations(["setComponentProps"]),
  },
  mounted() {
    // console.log("mounted", this.contentSetting);
  },
};
</script>
<style lang="scss" scoped>
.img_setting_container {
  position: relative;
  width: 100%;
  height: 100%;
  .img_container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-x: hidden;
  }
}
.img_setting_title {
  width: 100%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #9797a1;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 15px;
  line-height: 20px;
}
.img_setting_box_content {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  .img_c_left {
    flex: 1;
    color: #595961;
    .img_c_l {
      display: flex;
      margin-bottom: 10px;
      line-height: 30px;
      .img_c_l_t {
        width: 40px;
        white-space: nowrap;
        overflow: hidden;
      }
      .img_c_l_c_l {
        color: #2589ff;
      }
    }
  }
  .img_c_right {
    width: 70px;
    height: 70px;
    position: relative;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
    .change_img {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      background: rgba($color: #000000, $alpha: 0.5);
      display: none;
      transition: 0.2s;
      .change_img_btn {
        width: 60px;
        height: 30px;
        text-align: center;
        font-size: 12px;
        margin: 20px auto;
        background: #fff;
        border-radius: 4px;
        font-weight: 600;
        color: #595961;
        line-height: 30px;
      }
    }
    &:hover {
      .change_img {
        display: block;
      }
    }
  }
}
.img_setting_box {
  padding: 15px 15px 20px;
  border-radius: 4px;
  margin: 0 10px 10px;
  min-height: 100px;
  background: #f0f2f5;
  .img_delete {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9797a1;
    float: right;
    cursor: pointer;
  }
}
.img_setting_add {
  width: 100%;
  height: 40px;
  color: #2589ff;
  border: none;
}
</style>